<template>
	<view class="order-content">
		<view class="map-order">
			<image src="../../static/icons/map.png"></image>
		</view>
		
		
		<view class="order-item" v-for="(item,index) in orderList" :key="index">
			<view class="item-wrap">
				<view class="c-name">{{item.clientName}}</view>
				<view class="c-list">
					<view class="list-left">
						<view>
							<uni-icons type="location" size="15" color="#989898"></uni-icons>
							&nbsp;<text>距离我 {{item.distance}} km</text>
						</view>
						<view class="list-down">
							<uni-icons type="wallet" size="15" color="#989898"></uni-icons>
							&nbsp;<text>单号 : &nbsp;{{item.orderNum}}</text>
						</view>
					</view>
					<view class="list-right">
						<view>
							<uni-icons type="wallet" size="15" color="#989898"></uni-icons>
							&nbsp;<text>下单 : &nbsp;{{item.orderTime}}</text>
						</view>
						<view class="list-down">
							<uni-icons type="wallet" size="15" :color="item.staus === 0 ? overtimeColor : overtimeColor1"></uni-icons>
							&nbsp;<text :style="{color: item.staus === 0 ? overtimeColor : overtimeColor1}">到期 : &nbsp;{{item.expirationTime}}</text>
						</view>
					</view>
				</view>
				<view class="c-detail" ref="imgHeight">
					<view class="detail-left">
						<image :src="item.orderImg"></image>
					</view>
					<view class="detail-right">
						<text>{{item.orderTitle}}</text>
						<text>{{item.orderDetail}}</text>
					</view>
				</view>
				<view class="c-btn">
					<button type="default"><uni-icons type="wallet" size="20" color="#4091D7"></uni-icons> &nbsp; 详情</button>
					<button type="default"><uni-icons type="location" size="20" color="#2E49E8"></uni-icons> &nbsp; 导航</button>
					<button type="default"><uni-icons type="wallet" size="20" color="#FFFFFF"></uni-icons> &nbsp; 接单</button>
				</view>
			</view>
		</view>
		
		<!-- <uni-card title="Tom" sub-title="距离我1Km" extra="下单时间:2022-1-2" :thumbnail="avatar">
			<view class="content">
				<image src="../../static/swiper_img/1.jpg" mode=""></image>
				<p>故障内容</p>
			</view>
			<view class="detialTime">
				<view>
					响应时间:2022-1-2
				</view>
				<view>
					到场时间:2022-1-2
				</view>
				<view>
					修复时间:2022-1-2
				</view>
			</view>
			<view class="operation">
				<button size="mini" @click="gotoDetial">详情</button>
				<button size="mini">接单</button>
			</view>
			<br>
			<view class="orderNumber">
				工单号:123456789
			</view>
		</uni-card>
		<uni-card title="Tom" sub-title="距离我1Km" extra="下单时间:2022-1-2" :thumbnail="avatar">
			<view class="content">
				<image src="../../static/swiper_img/1.jpg" mode=""></image>
				<p>故障内容</p>
			</view>
			<view class="detialTime">
				<view>
					响应时间:2022-1-2
				</view>
				<view>
					到场时间:2022-1-2
				</view>
				<view>
					修复时间:2022-1-2
				</view>
			</view>
			<view class="operation">
				<button size="mini" @click="gotoDetialS">详情</button>
				<button size="mini">接单</button>
			</view>
			<br>
			<view class="orderNumber">
				工单号:123456789
			</view>
		</uni-card> -->
	</view>
</template>

<script>
	export default {
		name: "pages-orderPool-serviceOrder",
		data() {
			return {
				orderList:[
					{
						clientName:'客户名称1',
						distance: 1,
						orderNum: 5556888,
						orderTime: '2022-11-10 12:00:00',
						expirationTime: '2022-11-10 18:00:00',
						orderTitle: '错误代码1',
						orderDetail: '故障说明==图片请求第一张，点击详情再请求所有？==故障说明故障说明故障说明故障说明字体个数超出限制用省略号代替',
						orderImg:'../../static/icons/img1.png',
						staus: 0
					},
					{
						clientName:'客户名称2',
						distance: 2,
						orderNum: 5556888,
						orderTime: '2022-11-10 12:00:00',
						expirationTime: '2022-11-10 18:00:00',
						orderTitle: '错误代码2',
						orderDetail: '故障说明==图片请求第一张，点击详情再请求所有？==故障说明故障说明故障说明故障说明字体个数超出限制用省略号代替',
						orderImg:'../../static/icons/img2.png',
						staus: 1
					},
				],
				overtimeColor: '#7ecc00',
				overtimeColor1: '#d2001b'
				
				
				
				
				// avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
			}
		},
		methods: {
			gotoDetial() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-waiting/orderProgress-waiting'
				})
			},
			gotoDetialS() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-appointment/orderProgress-appointment'
				})
			}
		},
		// computed: {
		// 	whStyle() {
		// 		return 'width:'+ this.$refs.imaHeight.height +'px'
		// 	}
		// }
	}
</script>

<style lang="less">
	
	.order-content{
		width: 100%;
		
		.map-order image { width: 100%;}
		
		.order-item {
			margin-top: 10px;
			background-color: #ffffff;
			border-radius: 8px;
			
			.item-wrap {
				height: 210px;
				width: 90%;
				margin-left: 5%;
				
				.c-name {
					height: 18%;
					font-size: 14px;
					font-weight: bold;
					display: flex;
					align-items: center;
				}
				
				.c-list {
					display: flex;
					font-size: 12px;
					color: #989898;
					height: 20%;
					align-items: center;
					 
					.list-left {
						flex: 2;
					}
					
					.list-right {
						flex: 3;
					}
					
					& .list-down { margin-top: 5px;}
				}
				
				.c-detail {
					display: flex;
					height: 32%;
					width: 100%;
					margin-top: 5px;
					
					.detail-left {
						flex: 1;
						align-items: center;
						
						image {	
							height: 100%;
							width: 100%;
							border-radius: 5px;
						}
					}
					
					.detail-right {
						flex: 3.5;
						display: flex;
						flex-direction: column;
						position: relative;
						& text:nth-of-type(1) {
							font-size: 14px;
							color: #000000;
							font-weight: bold;
							margin-top: 3%;
							margin-left: 2%;
						}
						& text:nth-of-type(2) {
							font-size: 12px;
							color: #989898;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							position: absolute;
							bottom: 0;
							margin-left: 2%;
						}
					}
				}
			
				.c-btn {
					display: flex;
					width: 100%;
					height: 30%;
					align-items: center;
					
					button {
						width: 30%;
						height: 45%;
						display: flex;
						align-items: center;
						border-radius: 18px;
						font-size: 12px;
						font-weight: bold;
						
						// uni-icons { margin-right: 5px;}
					}
					
					& button:nth-of-type(1) { 
						color: #4091D7;
						background: rgba(64,145,215,0.06);
						border: 1px solid #4091D7;
					}
					
					& button:nth-of-type(2) {
						color: #2E49E8;
						background: rgba(43,70,233,0.08);						
						border: 1px solid #2E49E8;
					}
					
					& button:nth-of-type(3) {
						color: #ffffff;
						background: #93C145;
						box-shadow: 0px 8px 15px 0px rgba(147,193,69,0.34);
					}
				}
			
			}
			
		}
		
	}
	
	
	
	
	.uni-card {
		display: flex;
		flex-direction: column;


		.content {
			display: flex;
			width: 100%;
			height: 150rpx;


			image {
				width: 200rpx;
				height: 100%;
			}

			p {
				width: calc(100% - 200rpx);
				height: 100%;
				padding: 0rpx 30rpx;
			}
		}

		.detialTime {
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;

		}

		.operation {
			float: right;

			button {
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 0.5rem;
				border: 2rpx solid #ccc;
				border-radius: 40rpx;
				background-color: #fff;
			}

			button:nth-child(1) {
				margin-right: 20rpx;
			}
		}

		.orderNumber {
			margin-top: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: aqua;
		}
	}
</style>
